<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>AgCIM 技术文章编写</title>
  <meta name="viewport" content="width=device-width,initial-scale=1.0">

  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <link rel="icon" href="favicon.ico" sizes="32x32">
  <link rel="icon" href="favicon.ico" sizes="64x64">
  <link rel="icon" href="favicon.ico" sizes="128x128">

  <link media="all" rel="stylesheet" type="text/css" href="./assets/styles/app.css">
  <link media="all" rel="stylesheet" type="text/css" href="./assets/styles/simditor.css">
  <link media="all" rel="stylesheet" type="text/css" href="./assets/styles/quill.snow.css">

  <script type="text/javascript" src="./assets/scripts/jquery.min.js"></script>
  <script type="text/javascript" src="./assets/scripts/mobilecheck.js"></script>
  <script type="text/javascript" src="./assets/scripts/quill.min.js"></script>

  <script type="text/javascript">
    if (mobilecheck()) {
      $('<link/>', {
        media: 'all',
        rel: 'stylesheet',
        type: 'text/css',
        href: 'assets/styles/mobile.css'
      }).appendTo('head')
    }
  </script>
</head>

<body>
  <div>
    <input placeholder="请输入文章名称" class="titleStyle" id="pageTitle" />
    <select class="paperTypeStyle" id="pageTitleType1" onchange="onPageTitleType1Changed()">
      <option useType="1">编程技术</option>
      <option useType="2">操作技巧</option>
      <option useType="3">规范规矩</option>
      <option useType="4">页面设计</option>
      <option useType="5">技术推荐</option>
      <option useType="6">软件部署</option>
      <option useType="7">BUG提醒</option>
    </select>
    <select class="paperTypeStyle" id="pageTitleType2">
      <option useType="1">CSharp</option>
      <option useType="1">JS</option>
      <option useType="1">AgCIMServer</option>
      <option useType="1">Cesium</option>
      <option useType="1">UE</option>
      <option useType="2">Studio</option>
      <option useType="2">Server</option>
      <option useType="2">GIS数据</option>
      <option useType="2">小工具</option>
      <option useType="2">UE</option>
      <option useType="3">基础</option>
      <option useType="4">交通</option>
      <option useType="5">竞品技术</option>
      <option useType="5">AI技术</option>
      <option useType="5">三维开源技术</option>
      <option useType="5">UE技术</option>
      <option useType="6">Windows环境</option>
      <option useType="6">Linux环境</option>
      <option useType="7">Studio</option>
      <option useType="7">性能提升</option>
      <option useType="7">Server</option>
      <option useType="7">UE</option>
    </select>
  </div>
  <div style="padding-left: 10px;position: fixed;top:80px">
    <button class="myButton2" onclick="onShowQuill()">粘贴图片</button><br>
    <button class="myButton2" onclick="onSaveClick()">提交保存</button>
  </div>
  </div>
  <div class="wrapper">
    <section id="page-demo">
      <div class="simditor">
        <div class="simditor-wrapper">
          <textarea id="txt-content" data-autosave="editor-content" autofocus="" required=""></textarea>
        </div>
      </div>
    </section>

    <script type="text/javascript" src="./assets/scripts/module.js"></script>
    <script type="text/javascript" src="./assets/scripts/uploader.js"></script>
    <script type="text/javascript" src="./assets/scripts/hotkeys.js"></script>
    <script type="text/javascript" src="./assets/scripts/simditor.js"></script>

  </div>
  <div id="QuillEditorContainer">
    <div style="position: relative;top: 10%;left: 10%;"><button class="myButton2"
        onclick="onQuillOK()">确定</button><button class="myButton2" onclick="onQuillCancel()">取消</button></div>
    <div id="QuillEditorContainerInner">
      <div id="QuillEditor"></div>
    </div>
  </div>

</body>
<script>
  (function () {
    $(function () {
      var $preview, editor, mobileToolbar, toolbar;
      Simditor.locale = 'en-US';
      toolbar = ['title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale', 'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link', 'image', 'hr', '|', 'indent', 'outdent', 'alignment'];
      mobileToolbar = ["bold", "underline", "strikethrough", "color", "ul", "ol"];
      if (mobilecheck()) {
        toolbar = mobileToolbar;
      }
      editor = new Simditor({
        textarea: $('#txt-content'),
        placeholder: '这里输入文字...',
        toolbar: toolbar,
        pasteImage: true,
        defaultImage: 'assets/images/image.png',
        upload: location.search === '?upload' ? {
          url: '/upload'
        } : false
      });
      window.myEditor = editor;
      document.getElementsByClassName('wrapper')[0].style.width = "calc(100% - 300px)";
      document.getElementById('page-demo').style.width = "100%"
      document.getElementsByClassName('simditor')[0].style.width = "100%";
      document.getElementsByClassName('simditor-wrapper')[0].style.width = "100%";
      document.getElementsByClassName('simditor')[1].style.width = "100%";
      document.getElementsByClassName('simditor-wrapper')[1].style.width = "100%";
    });
  }).call(this);

  var quill = new Quill('#QuillEditor', {
    theme: 'snow'
  });
  formatInitalizeStyle();
  function formatInitalizeStyle() {
    document.getElementById('QuillEditorContainer').style.display = "none";
    setTimeout(function () {
      var items = document.getElementsByClassName('simditor-icon');
      for (var i = 0; i < items.length; i++) {
        items[i].style.lineHeight = "40px";
      }
    }, 3000)
    onPageTitleType1Changed();
  }
  function onPageTitleType1Changed(e) {
    var aa = document.getElementById("pageTitleType1")
    var bb = document.getElementById("pageTitleType2")
    var firstSelectIndex = -1;
    for (var i = 0; i < bb.options.length; i++) {
      if (bb.options[i].attributes.usetype.value == aa.options[aa.selectedIndex].attributes.usetype.value) {
        bb.options[i].style.display = "";
        if (firstSelectIndex == -1) {
          firstSelectIndex = i;
        }
      } else { bb.options[i].style.display = "none"; }
    }
    bb.selectedIndex = firstSelectIndex;
  }
  function onShowQuill() {
    document.getElementsByClassName('simditor-body')[0].style.zIndex = 0;
    document.getElementById('QuillEditorContainer').style.display = "block";
    document.getElementById('QuillEditorContainer').style.zIndex = 1;
  }
  function onSaveClick() {
    var fileName = document.getElementById("pageTitle").value;
    var userName = localStorage.getItem("AgCIM_Desktop_Doc.Usr");
    if (userName && userName.indexOf('@') > 0) {
      userName = userName.substring(0, userName.indexOf('@'));
    }
    else {
      userName = "";
    }
    if(window.currentPageOwner&&window.currentPageOwner.length>0){
      userName=window.currentPageOwner;
    }
    if (fileName < 5) {
      alert("文章名称不能小于5个字，不然容易冲掉");
      return;
    }
    var paperType1 = document.getElementById("pageTitleType1").value;
    var paperType2 = document.getElementById("pageTitleType2").value;
    var pageData = docrateHtml(myEditor.getValue());
    sendData("SaveJikeFile:" + paperType1 + "/" + paperType2 + "/" + userName + "_" + fileName + ";" + pageData);
  }
  function docrateHtml(pageData) {
    if (pageData.indexOf('pageData') < 0) {
      var reeditButton = "<button id='reeditBtn' onclick='window.open(" + "\"http://121.33.231.74:4180/desktopDoc/jike/cimPaperEditor.html?\"+window.location.href)'>重新编辑</button>";
      pageData = "<div>" + reeditButton  + "</div>" + pageData;
    }
    if (pageData.indexOf("sendSockJS") < 0) {
      pageData += "<script id='sendSockJS' type=\"text/javascript\" src=\"http://121.33.231.74:4180/desktopDoc/jike/assets/scripts/saveData.js\">\<\/script>";
      pageData += "<script id='sendSockJS2' type=\"text/javascript\" src=\"http://121.33.231.74:4180/desktopDoc/jike/assets/scripts/singleViewPage.js\">\<\/script>";
    }
    if (pageData.indexOf("<table>") >= 0 && pageData.indexOf('tableStyle') < 0) {
      pageData += "<style name='tableStyle'>td,th{border:1px solid;text-align:center}table{width:100%} th{background: #c7c3be;}</style>"
    }
    return pageData;
  }
  function onQuillOK() {
    myEditor.setValue(myEditor.getValue() + quill.root.innerHTML);
    onQuillCancel();
  }
  function onQuillCancel() {
    document.getElementById('QuillEditorContainer').style.display = "none";
    document.getElementsByClassName('simditor-body')[0].style.zIndex = 1;
    document.getElementById('QuillEditorContainer').style.zIndex = 0;
    quill.setContents()
  }
</script>
<script type="text/javascript" src="./assets/scripts/saveData.js"></script>
<script type="text/javascript" src="./assets/scripts/reedit.js"></script>
<style>
  .titleStyle {
    width: calc(100% - 500px);
    font-size: 24px;
    text-align: center;
    color: #FF5722;
    font-weight: bold;
    padding: 10px;
    margin: 10px;
    border-radius: 35px;
    border-color: #9C27B0;
    border-width: 1px;
  }

  .paperTypeStyle {
    width: 180px;
    font-size: 24px;
    text-align: center;
    color: #FF5722;
    font-weight: bold;
    padding: 10px;
    margin: 10px;
    border-radius: 35px;
    border-color: #9C27B0;
    border-width: 1px;
  }

  #QuillEditorContainer {
    display: block;
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    background-color: #bbbbbbc9;
  }

  #QuillEditorContainerInner {
    display: block;
    width: 80%;
    height: 80%;
    position: relative;
    top: 10%;
    left: 10%;
    background-color: white;
  }

  .myButton2 {
    padding: 4px;
    margin: 4px;
  }
</style>

</html>